{extend name="main"}
{block name="body"}
<div class="bg-white p-3">
    <div class="table-responsive">
        <el-table ref="tableList" :data="tableData" style="width: 100%;" header-cell-class-name="table-header-DDE6FB"
            @selection-change="()=>{}">
            <el-table-column type="selection" width="55" :selectable="()=>false">
            </el-table-column>
            <el-table-column label="ID">
                <template slot-scope="scope">
                    {{scope.row.id}}
                </template>
            </el-table-column>
            <el-table-column label="专题名称">
                <template slot-scope="scope">
                    <a target="_blank" :href="'{:config('web.url');}'+'/special/details/'+scope.row.id+'.html'">
                        {{scope.row.title}}
                    </a>
                </template>
            </el-table-column>
            <el-table-column label="已报名企业数量">
                <template slot-scope="scope">
                    {{scope.row.company_number}}
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    {{scope.row.status}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" plain round type="primary" @click="edit(scope.row.id)">编辑</el-button>
                    <el-button size="mini" plain round type="danger" @click="remove(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="table-responsive py-3 text-center">
		<el-pagination
		  background
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="search.page"
	      :page-sizes="[10,50,100,200]"
	      :page-size="search.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="search.total">
	    </el-pagination>
	</div>
</div>
{/block}

{block name='script'}
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                view: XYBase.view,
                labelPosition: 'right',
                defaultProps: {
                    value: 'id',
                    label: 'title',
                    children: 'data',
                    checkStrictly: true
                },
                search: {
                    status,
                    page: 1,
                    status: null,
                    total: 0,
                    pageSize: 10
                },
                tableData: []
            }
        },
        watch: {
            view: XYBase.viewWatch,
            pid(val, oldVal) {
                if (val.length > 0) {
                    this.form.pid = val[val.length - 1];
                } else {
                    this.form.pid = 0;
                }
            },
        },
        methods: {
            edit(id) {
                window.open('/specialTopic/saveRecruit/' + id);
            },
            remove(row) {
                this.$confirm('此操作将永久删除此专题招聘, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.ajax({
                        url: '/specialTopic/removeRecruit/' + row.id,
                        type: 'post',
                        data: { id: row.id },
                        success(res) {
                            if (res) {
                                if (res.code == 0 && res.msg != undefined) {
                                    XYBase.success(`已将${row.title}删除`);
                                } else {
                                    XYBase.msg(res.msg);
                                }
                            } else {
                                XYBase.error(XYBase.config.system_network_error);
                            }
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSizeChange(val) {
				this.search.page=1;
				this.search.pageSize=val;
	          	this.initHtml();
			},
			handleCurrentChange(val) {
				this.search.page=val;
	          	this.initHtml();
			},
            initHtml() {
                var _this = this;
                _this.search.ajax = true;
                $.ajax({
                    url: '',
                    type: 'get',
                    data: _this.search,
                    dataType: 'json',
                    error: function (err) {
                        // console.log(err);
                        _this.search.ajax = false;
                        XYBase.error(XYBase.config.system_network_error);
                    },
                    success: function (res) {
                        console.log(res);
                        _this.search.ajax = false;
                        if (res) {
                            if (res.code == 0) {
                                _this.search.total = res.data.total;
                                _this.tableData = res.data.data;
                            } else {
                                XYBase.msg(res.msg);
                            }
                        } else {
                            XYBase.error(XYBase.config.system_network_error);
                        }
                    }
                });
            }
        },
        created() {
            XYBase.created(this);
        },
        mounted() {
            this.initHtml();
        },
    });
    $(function () {
        reloadWindowSize();
        $(window).resize(function () {
            reloadWindowSize();
        });
    });
    function reloadWindowSize(argument) {
        var winW = $(window).width();
        if (winW <= 576) {
            vm.labelPosition = 'top';
        } else {
            vm.labelPosition = 'right';
        }
    }
</script>
{/block}